import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Menu, Icon } from 'antd';

import styles from './index.module.css';
import logoPng from '../../assets/img/logo.png';

/**
 * 侧边菜单栏
 */
export default class SiderMenu extends PureComponent {

  static propTypes = {
    routes: PropTypes.array.isRequired,
    pathname: PropTypes.string.isRequired,
    collapsed: PropTypes.bool.isRequired
  };

  static defaultProps = {
    routes: [],
    pathname: '',
    collapsed: false
  };

  constructor(props) {
    super(props);

    this.state = { openKeys: [props.pathname] };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.collapsed) {
      this.setState({ openKeys: [] });
    }
  }

  handleOpenChange = (openKeys) => {

    const { routes } = this.props;
    const routeMenuKeys = routes.map(item => item.path);
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);

    console.log('handleOpenChange ', latestOpenKey, routeMenuKeys);
    if (routeMenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  }

  render() {

    const { routes, pathname, collapsed } = this.props;

    let menuItems = [];
    for (let i in routes) {
      
      const route = routes[i];
      if (!route.hasOwnProperty('hidden') || route.hidden === false) {

        if (route.children) {
          menuItems.push(this.renderSubMenu(route, pathname))
        }
        else {
          menuItems.push(
            <Menu.Item key={route.path}>
              <Link to={route.path} replace={route.path === pathname }>
                {route.icon ? <Icon type={route.icon} /> : ''}
                <span>{route.name}</span>
              </Link>
            </Menu.Item>
          )
        }
      }
    }

    return (
      <div>
        <div className={styles.logoArea}>
          {
            collapsed ? 
            <span /> :
            <img className={styles.logo} src={logoPng} />
          }
        </div>
        <Menu 
          theme='dark' mode='inline'
          openKeys={this.state.openKeys}
          onOpenChange={this.handleOpenChange}>
          {menuItems}
        </Menu>
      </div>
    );
  }

  renderSubMenu(subRoute, pathname) {

    const { location } = this.props;

    let menuItems = [];
    for (let i in subRoute.children) {

      const route = subRoute.children[i];
      if (!route.hasOwnProperty('hidden') || route.hidden === false) {

        if (route.children) {
          menuItems.push(this.renderSubMenu(route))
        }
        else {
          menuItems.push(
            <Menu.Item key={route.path}>
              <Link to={subRoute.path + route.path} replace={route.path === pathname }>
              {route.icon ? <Icon type={route.icon} /> : ''}
              <span>{route.name}</span>
              </Link>
            </Menu.Item>
          )
        }
      }
    }

    return (
      <Menu.SubMenu key={subRoute.path} title={
        <span>
          {subRoute.icon ? <Icon type={subRoute.icon} /> : ''}
          <span>{subRoute.name}</span>
        </span>
      }>
        {menuItems}
      </Menu.SubMenu>
    ) 
  }
}